import React, { useState, useEffect } from 'react';
import { Row, Col, Form, Input, Button, Modal, Tooltip } from 'antd';
import { connect } from 'dva';
import useSlickTable from '@/hooks/useSlickTable';
import SlickTable from '@/components/SlickTable';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function DealUserSelect(props) {
  const { getFieldDecorator } = props.form;
  const [params, setParams] = useState({
    flowNodeId: props.flowNodeId,
    objType: '1000',
    statusCd: '1000',
  });
  const [selectRows, setSelectRows] = useState([]);

  const initData = () => {
    props.form.setFieldsValue({
      flowNodeId: props.flowNodeId,
      objType: '1000',
      statusCd: '1000',
    });
  };

  // 初始化
  useEffect(() => {
    initData();
  }, []);

  // 初始化表格数据
  const { tableProps } = useSlickTable(
    { pageSize: 5 },
    'pmc/pms/PmTacheStaffRelaController/queryPage',
    params
  );

  const handleSelectRows = value => {
    setSelectRows(value);
  };

  // 表单重置
  const handleResetForm = () => {
    props.form.resetFields(); // 这是重置为默认值
    props.form.setFieldsValue({
      flowNodeId: props.flowNodeId,
      objType: '1000',
      statusCd: '1000',
    });
  };

  const handleQueryData = () => {
    const formData = props.form.getFieldsValue();
    formData.pageSize = 5;
    formData.pageNum = 1;
    formData.gb_reset = true;
    setParams(formData);
  };

  const cellStyle = {
    maxWidth: 200,
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    cursor: 'pointer',
  };

  const columns = [
    {
      title: '操作员工号',
      dataIndex: 'objCode',
    },
    {
      title: '操作员名称',
      dataIndex: 'objName',
    },
    {
      title: '岗位名称',
      dataIndex: 'postName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '归属地市',
      dataIndex: 'regionName',
    },
    {
      title: '归属县市',
      dataIndex: 'countyName',
    },
  ];

  // 通过‘x’关闭弹窗
  const handleCancel = () => {
    const { handleSetSelectDealUserModalVisible } = props;
    handleSetSelectDealUserModalVisible(false);
  };
  /**
   * 确定按钮事件
   */
  const handleOk = () => {
    const { handleSetSelectDealUserModalVisible, handleOkSelectDealUser } = props;

    handleOkSelectDealUser(selectRows);
    handleSetSelectDealUserModalVisible(false);

    setSelectRows([]);
    handleResetForm();
    setParams({});
  };

  return (
    <Modal
      title="用户选择列表"
      visible={props.modalVisible}
      width="60%"
      onCancel={() => {
        handleCancel();
      }}
      onOk={() => {
        handleOk();
      }}
    >
      <Form style={{ marginBottom: 10 }}>
        <Row>
          <Col span={8}>
            <FormItem label="操作员工号" {...formItemLayout}>
              {getFieldDecorator('userCode')(<Input placeholder="请输入操作员工号" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="操作员名称" {...formItemLayout}>
              {getFieldDecorator('userName')(<Input placeholder="请输入操作员名称" />)}
            </FormItem>
          </Col>
          <div style={{ display: 'none' }}>
            <Col span={8}>
              <FormItem>{getFieldDecorator('flowNodeId')(<Input />)}</FormItem>
            </Col>
          </div>
          <div style={{ display: 'none' }}>
            <Col span={8}>
              <FormItem>{getFieldDecorator('objType')(<Input />)}</FormItem>
            </Col>
          </div>
        </Row>

        <div style={{ textAlign: 'center' }}>
          <Button
            type="primary"
            className="margin-right"
            onClick={() => {
              handleQueryData();
            }}
          >
            查询
          </Button>
          <Button type="default" onClick={handleResetForm}>
            重置
          </Button>
        </div>
      </Form>

      <SlickTable
        rowKey={record => record.tacheStaffRelId}
        columns={columns}
        pick="radio"
        onSelectRow={handleSelectRows}
        selectedRows={selectRows}
        {...tableProps}
      />
    </Modal>
  );
}
export default connect(({ setting }) => ({
  size: setting.size,
}))(Form.create()(DealUserSelect));
